<template>
  <div class="activity-item flex alignCenter" @click="proxy.$utils.toLink(`/packagePages/activity/details?activityId=${info.activityId}`)">
    <view class="image positionRelative">
      <uv-image :src="info.activityImageUrl" width="110px" height="100px"></uv-image>
      <view class="isVip" v-if="info.isVipActivity">
        <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17294262813174292.png" width="32px" height="10px"></uv-image>
      </view>
    </view>
    <view class="data">
      <view class="title fz14 bold">{{info.activityName}}</view>
      <view class="tags fz10">
        <view class="tag flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293610808528752.png" width="12px" height="12px"></uv-image>
          <text>{{info.activityStartTime}}</text>
        </view>
        <view class="tag flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293610809652610.png" width="12px" height="12px"></uv-image>
          <text>{{info.address}}</text>
        </view>
      </view>
      <view class="flex justifyBetween alignCenter">
        <view class="flex alignCenter">
          <uv-avatar-group :urls="info.participantLogos" size="25" gap="0.7"></uv-avatar-group>
          <view class="join fz12">参加</view>
        </view>
        <uv-button text="已报名" color="linear-gradient(to bottom, #4FF9C1, #34C0B1)" size="small" shape="circle"></uv-button>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["item"]);
const { proxy } = getCurrentInstance();

let info = computed(() => {
  return props.item;
});
</script>



<style lang="scss" scoped>
.activity-item {
  border-radius: 10px;
  background-color: white;
  margin-top: 15px;
  border-radius: 5px;
  overflow: hidden;
  .title {
  }
  .isVip {
    position: absolute;
    left: 5px;
    top: 5px;
  }
  .data {
    width: 100%;
    padding: 0 15px;
    .tags {
      margin: 3px 0;
      .tag {
        margin-top: 3px;
      }
    }
    .join {
      color: #13c9bd;
      margin-left: 12px;
    }
  }
}
</style>



